<template>
	<view>
		<view class="smart-container">1.容器</view>
		<view @click="goDetailPage('view')">
			<text space="emsp">&nbsp;&emsp;view视图</text>
		</view>
		<view @click="goDetailPage('scroll-view')">
			<text space="emsp">&nbsp;&emsp;scroll-view视图</text>
		</view>
		<view @click="goDetailPage('swiper')">
			<text space="emsp">&nbsp;&emsp;swiper视图</text>
		</view>

		<view class="smart-container">2.基础内容</view>
		<view @click="goDetailPage('text')">
			<text space="emsp">&nbsp;&emsp;text文本编辑</text>
		</view>
		<view @click="goDetailPage('rich-text')">
			<text space="emsp">&nbsp;&emsp;rich-text富文本编辑</text>
		</view>
		<view @click="goDetailPage('progress')">
			<text space="emsp">&nbsp;&emsp;progress进度条</text>
		</view>
		<view @click="goDetailPage('icon')">
			<text space="emsp">&nbsp;&emsp;icon图标</text>
		</view>

		<view class="smart-container">3.表单组件</view>
		<view @click="goDetailPage('button')">
			<text space="emsp">&nbsp;&emsp;button按钮</text>
		</view>
		<view @click="goDetailPage('checkbox')">
			<text space="emsp">&nbsp;&emsp;checkbox多选框</text>
		</view>
		<view @click="goDetailPage('label')">
			<text space="emsp">&nbsp;&emsp;label标签组件</text>
		</view>
		<view @click="goDetailPage('input')">
			<text space="emsp">&nbsp;&emsp;input输入框</text>
		</view>
		<view @click="goDetailPage('textarea')">
			<text space="emsp">&nbsp;&emsp;textarea多行文本输入框</text>
		</view>
		<view @click="goDetailPage('form')">
			<text space="emsp">&nbsp;&emsp;form表单</text>
		</view>

		<view class="smart-container">4.导航组件</view>
		<view @click="goDetailPage('navigator')">
			<text space="emsp">&nbsp;&emsp;navigator</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		// onLoad() {
		// 	uni.getStorage({
		// 		key:"username",
		// 		data:"qkh",
		// 		success(result)=> {
		// 			console.log("getStorage",result.data)
		// 		}
		// 	})
		// },
		methods: {
			goDetailPage(e) {
			    if (typeof e === 'string') {
			        uni.navigateTo({
						url: '/pages/component/' + e + '/' + e
			        });
			    } else {
			        uni.navigateTo({
			            url: e.url
			        });
			    }
			}
		}
	}
</script>

<style>
.smart-container {
	font-weight: bold;
	padding: 20rpx 0 10rpx 20rpx;
	background-color: #f5f5f5;
}
</style>